StudywithDemo

How to Move Multi Select Dropdown Options using Up and Down Buttons

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Now we are going to learn how to move multi select dropdown options using up and down buttons.  I used jquery and bootstrap technologies. Bootstrap is used for only designing the select dropdown values, up/down  buttons and adding icons. If you don't want design you can remove it and we can also use javascript to create these functionality but jquery makes little bit easy. Lets see the example and video demo.<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CRkO7dgpZYt4fqYJ4BtkEIWOKETAHu9AvJRLUkaAYr5noDHao7vEtQ64l_jpvgSbdolrtSaiNpYy5Ct241cCGhVLzm4OXJZfrknZuliy2aInh6CLvRi4lZRveLn6AEYZRPIpZ-PSm5E/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CRkO7dgpZYt4fqYJ4BtkEIWOKETAHu9AvJRLUkaAYr5noDHao7vEtQ64l_jpvgSbdolrtSaiNpYy5Ct241cCGhVLzm4OXJZfrknZuliy2aInh6CLvRi4lZRveLn6AEYZRPIpZ-PSm5E/s640/Capture.PNG" width="640"></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>

How to Move Multi Select Dropdown Options using Up and Down Buttons

Now we are going to learn how to move multi select dropdown options using up and down buttons. I used jquery and bootstrap technologies. ...

How to Access HTML5 Data Attributes using JQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery contains data() and attr() methods by using this we will see how to set and get HTML5 data-attributes data. HTML5 has brought  lot of interesting changes into html one of the item that is very helpful in client side programming is data-* Attributes provide a way to store custom data on elements.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
Jquery easily read and write data using two approaches but there are some differences between them here we can except different outputs so observe the examples carefully.</div>
<div style="text-align: justify;">
<br>
<b>Example</b><br>
<br></div>
<div style="text-align: justify;">
<pre class="brush:html"><!DOCTYPE html>
<html>
<head>
    <title>Accessing HTML5 Data-* Attributes Example</title>
</head>
<body>
    <div id="attendanceList"  
     data-name="faruk" 
     data-age="24" 
     data-gender="male"
     data-attended ="true"
     data-object='{"name": "faruk", "gender":"male", "age": 24, "attended": true}'>
     Today Faruk Attended to Class
 </div>
    
    <h1>How to set /get data-* values using attr() function</h1>
    <div id="attrOutput"></div>
    <h1>How to set /get data-* values using data() function</h1>
    <div id="dataOutput"></div>
    <script src="jquery.min.js"></script>
    <script>
        var $attendanceList  = $("#attendanceList ");
        var $attrOutput = $("#attrOutput");
        var getName = $attendanceList.attr("data-name");
        var getAge = $attendanceList.attr("data-age");
        var getGender = $attendanceList.attr("data-gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.attr("data-attended");
        var getObject = $attendanceList.attr("data-object");
  
        $attrOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
       
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.attr("data-name"));
  
  var $attendanceList  = $("#attendanceList");
        var $dataOutput = $("#dataOutput");
        var getName = $attendanceList.data("name");
        var getAge = $attendanceList.data("age");
  var getGender = $attendanceList.data("gender");
        var addingOneToAge = getAge + 1;
        var getAttended = $attendanceList.data("attended");
        var getObject = $attendanceList.data("object");
  
        $dataOutput.html("Name: " + getName + "<br /><br />Gender: " + getGender +"
        <br /><br />Age: " + getAge + " = " + typeof (getAge) +"
        <br /><br />Age + 1: " + addingOneToAge +"
        <br /><br />Attended: " + getAttended + " = " + typeof (getAttended) +"
        <br /><br />Object: " + getObject);
  
  //var setName = $attendanceList.attr("data-name","shaik");
  //alert(setName.data("name"));
    </script>
</body>
</html>
</pre>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="color: #990000;">Output Screenshot</span></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45Y2On5hGmirRiavSFHt7BgMlVPF0PmzAcrVGz1SMBTTgKJu69jsm9RgfSoOwsuf8XAyJtquhCby0bZCWifFQvqG4-gKpHF1bQ-fylA1PF7atmb2TvCL-oDQeb7N4XEGFwSDNfz_pe0/s1600/final+(1).PNG" width="640"></a></div>
</div></div>

How to Access HTML5 Data Attributes using JQuery

In this tutorial we will talk about different jquery techniques and various approaches to access the HTML5 data-attributes data. Jquery co...

Random JQuery Progress Bar using Ajax and Servlet

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Hi everyone welcome to studywithdemo. Today im very much interested to tell about how to create random jquery progress bar using ajax and servlet because this is the first tutorial i have done after learning jquery. Jquery is one of the favorite subject to me. Using jQuery most of the work becomes easy and it makes UI <span style="text-align: left;">more interactive and rich look.</span></div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: justify;">
Before going into the example I want to tell one thing here am not covering any file upload and download progress bar only showing how progress bar will works on server side. This example completely not suitable for everyone but definitely creates a basic idea, using this you can modify and implement code according to your requirements. To create random progress bar I have used ajax and servlet as serverside technology.</div>
<div style="text-align: justify;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0oN0TKIozZCasdd0sB6OvAva3f5-D7tblS18FXG3M-xgrjx8aUAFIOCWW6P1TY7E2J476CHAHoVrxL21qV9WWL30pV0JxnW7fNVa3JjPkUJPk4rEo81v8X9JC3jON1zW_5jXLwLxUMA/s1600/progress_bar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Random Progress bar" border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0oN0TKIozZCasdd0sB6OvAva3f5-D7tblS18FXG3M-xgrjx8aUAFIOCWW6P1TY7E2J476CHAHoVrxL21qV9WWL30pV0JxnW7fNVa3JjPkUJPk4rEo81v8X9JC3jON1zW_5jXLwLxUMA/s1600/progress_bar.png" title="" width="640"></a></div>
</div>

Random JQuery Progress Bar using Ajax and Servlet

Hi everyone welcome to studywithdemo. Today im very much interested to tell about how to create random jquery progress bar using ajax and ...

Datatable Server Side Processing Using Java

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Lets start creating datatable server side listing page using java. Datatable is an ultimate solution for those who want to develop listing pages. By using datatable we can can handle, render large and complicated data very easily.  In this example I have implemented so many features like custom toolbar, initialized filter delay, added refresh and multiple search boxes at the top for individual column search. The processing of sorting, pagination and search is completely done at serverside using java.Technologies used in this example are java, servlet, jsp, jquery-datatable plugin and little bit css. You can also use this plugin in your frameworks like spring MVC and structs.<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9JMn4mDwnE2GrFYZmKcUan36BW9t-L8zgJumKA7zIL8B_M1SjzofCw2NAc6PZjfkvK8KKxXv6_ndksOXe3biRkwE3yHt_xcMILZDQd_TJ0xtVXgupw9VNfeaqUcKuED5TRj1EEFfAfA/s1600/Screenshot+(28).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Datatable serverside listing page using java" border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9JMn4mDwnE2GrFYZmKcUan36BW9t-L8zgJumKA7zIL8B_M1SjzofCw2NAc6PZjfkvK8KKxXv6_ndksOXe3biRkwE3yHt_xcMILZDQd_TJ0xtVXgupw9VNfeaqUcKuED5TRj1EEFfAfA/s1600/Screenshot+(28).png" title="" width="640"></a></div>
</div></div>

Datatable Server Side Processing Using Java

Lets start creating datatable server side listing page using java. Datatable is an ultimate solution for those who want to develop listing...

How to create facebook like edit box using jquery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin;">Hai
frnds, today im creating facebook like profile edit with jquery without using
any database. Here i used the simple .toggle() function means it toggle two functions
when a button is clicked, but the .toggle() function is available upto jquery 1.8
version if any one working with jquery 1.9 or above version it does not work so
please download the below 1.8 jquery version. All the versions are available in
jquery official site. Simply go to </span><a href="http://jquery.com/download/" rel="nofollow" target="_blank">http://jquery.com/download/</a><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin;"> website scroll
down the page to Past Releases of jquery, Download and Enjoy it.</span><br>
<div style="text-align: center;">
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin;"><br></span>
<span style="color: #e06666; font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin;"><b>Sample Screenshot  </b></span><br>
<span style="color: #e06666; font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin;"><b><br></b></span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4-60QtgZaQ3gSWngV1YFrpedR4TUkXob_FtgtZt37kb-g9h0DG-VPS8iK6hXGtZb8xi0s1m3FPE4pKJL4t7DV8SL1Ssi6ENm2aMSxegPgFo2fZCqsARykuNQa_lOCcfz9glZp4LcgqI/s1600/editbox1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook like profile edit" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4-60QtgZaQ3gSWngV1YFrpedR4TUkXob_FtgtZt37kb-g9h0DG-VPS8iK6hXGtZb8xi0s1m3FPE4pKJL4t7DV8SL1Ssi6ENm2aMSxegPgFo2fZCqsARykuNQa_lOCcfz9glZp4LcgqI/s320/editbox1.PNG" title="" width="320"></a><br>
</div></div></div></div>

How to create facebook like edit box using jquery

Hai frnds, today im creating facebook like profile edit with jquery without using any database. Here i used the simple .toggle() function...

Font Size Change with jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Hai everyone today i will show how to change font size using jQuery.I am trying to do it very simple. Just u need little jQuery and html knowledge. By using this tutorial we can easily increase and decrease the font size dynamically with jQuery.</div>
<div style="text-align: justify;">
<br></div>
<div style="text-align: center;">
<span style="color: #e06666;"><b>Screenshot</b></span></div>
<div style="text-align: center;">
<br></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcU_74mw3qWCL-UjUHlUbLMQplchVioVO7Y_UQAr2lJKNVOvjb3Fem9wS6u762-GF4EJTqZ377bOT7v6MIq7Laq2hpOhCWyo7GN-hc7LFd3YWZyzJZBX2UHtm3IXXsAZCasXkdejqJneg/s1600/studywithdemo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcU_74mw3qWCL-UjUHlUbLMQplchVioVO7Y_UQAr2lJKNVOvjb3Fem9wS6u762-GF4EJTqZ377bOT7v6MIq7Laq2hpOhCWyo7GN-hc7LFd3YWZyzJZBX2UHtm3IXXsAZCasXkdejqJneg/s400/studywithdemo.png" width="400"></a></div>
</div>

Font Size Change with jQuery

Hai everyone today i will show how to change font size using jQuery.I am trying to do it very simple. Just u need little jQuery and html k...